<template>
    <div>
<van-nav-bar
  title="标题"
  left-text="返回"
  left-arrow
  @click-left="onClickLeft"
/>
<van-search
  v-model="value"
  shape="round"
  background="#4fc08d"
  placeholder="请输入搜索关键词"
/>
<van-tabs v-model:active="active">
  <van-tab title="标签 1">
    <van-swipe :autoplay="3000" lazy-render>
  <van-swipe-item v-for="image in images" :key="image">
    <img :src="image" style="width: 370px;height: 200px;"/>
  </van-swipe-item>
</van-swipe>
<van-grid>
  <van-grid-item :icon="item.image_src" :text="item.name" v-for="item in catitemsApiData"/>
</van-grid>
  </van-tab>
  <van-tab title="标签 2">内容 2</van-tab>
  <van-tab title="标签 3">内容 3</van-tab>
  <van-tab title="标签 4">内容 4</van-tab>
</van-tabs>
<h3>2345</h3>
<van-tabs v-model:active="active" type="card">
  <van-tab title="标签 1">
    <van-image
  width="100"
  height="100"
  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
<van-image
  width="100"
  height="100"
  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
<van-image
  width="100"
  height="100"
  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
  </van-tab>
  <van-tab title="标签 2">内容 2</van-tab>
  <van-tab title="标签 3">内容 3</van-tab>
</van-tabs>
<h3>2345</h3>
<van-image
  width="380"
  height="300"
  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
</div>
</template>

<script setup>
 const images = [
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg',
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg',
    ];
    import { ref } from 'vue';
    import { catitemsApi } from '@/api/api';
    let catitemsApiData=ref([])
    catitemsApi().then(res=>{
        catitemsApiData.value=res.data.message
        console.log(res);
        
    })
</script>

<style lang="scss" scoped>

</style>